<template>
	<view class="page ex-mall-tab-page" :class="[$themeClass('page-another-bg-color')]">
		<!-- 头部 -->
		<view class="ex-mall-header" :class="[$themeClass('header-bg-color')]">
			<!-- #ifdef MP-WEIXIN -->
			<view class="ex-mall-header-mp-weixin-fill" :class="[$themeClass('header-title-color')]">我的</view>
			<!-- #endif -->
			<view class="ex-mall-header-content">
				<!-- header左边占位 -->
				<view class="ex-mall-header-left">
					<view class="ex-mall-header-btn">
						<text class="ex-mall-header-btn-icon"></text>
					</view>
				</view>
				<view class="ex-mall-header-title" :class="[$themeClass('header-title-color')]">我的</view>
				<view class="ex-mall-header-right">
					<view class="ex-mall-header-btn" :class="[$themeClass('header-btn-left-further-bg-color')]">
						<text class="ex-mall-header-btn-icon ri-settings-5-line" :class="[$themeClass('header-btn-left-icon-further-color')]"></text>
					</view>
				</view>
			</view>
		</view>

		<view class="top" :class="[$themeClass('header-bg-color'), $themeClass('header-title-color')]">
			<view class="avatar">
				<image class="img" :src="userInfo.avatar"></image>
			</view>
			<view class="name">{{userInfo.username}}</view>
		</view>

		<!-- 功能与广告 -->
		<view class="ex-mall-panel list" :class="[$themeClass('panel-bg-color')]">
			<view class="ex-mall-panel-title" :class="[$themeClass('panel-title-bg-color'), $themeClass('panel-title-color')]">
				<view class="text">功能&创作</view>
			</view>
			<view class="ex-mall-panel-content" :class="[$themeClass('panel-content-bg-color')]">
				<view class="list-box">
					<view class="list-column left">
						<view class="item" >
							<view class="thumbnail">
								<image class="img" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-book-read-fill"></text>
								</view>
							</view>
						</view>
						<view class="item" >
							<view class="thumbnail">
								<image class="img" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-bookmark-line"></text>
								</view>
							</view>
						</view>
					</view>
					<view class="list-column right">
						<view class="item" >
							<view class="thumbnail">
								<image class="img" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-battery-fill"></text>
								</view>
							</view>
						</view>
						<view class="item" >
							<view class="thumbnail">
								<image class="img" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-bug-line"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容与变现 -->
		<view class="ex-mall-panel list" :class="[$themeClass('panel-bg-color')]">
			<view class="ex-mall-panel-title" :class="[$themeClass('panel-title-bg-color'), $themeClass('panel-title-color')]">
				<view class="text">内容&变现</view>
			</view>
			<view class="ex-mall-panel-content" :class="[$themeClass('panel-content-bg-color')]">
				<view class="list-box">
					<view class="list-column left">
						<view class="item" >
							<view class="thumbnail">
								<image class="img" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-clipboard-fill"></text>
								</view>
							</view>
						</view>
					</view>
					<view class="list-column right">
						<view class="item" >
							<view class="thumbnail">
								<image class="img" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-discord-line"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 更多服务 -->
		<view class="ex-mall-panel list" :class="[$themeClass('panel-bg-color')]">
			<view class="ex-mall-panel-title" :class="[$themeClass('panel-title-bg-color'), $themeClass('panel-title-color')]">
				<view class="text">更多&服务</view>
			</view>
			<view class="ex-mall-panel-content" :class="[$themeClass('panel-content-bg-color')]">
				<view class="list-box">
					<view class="list-column left">
						<view class="item" >
							<view class="thumbnail">
								<image class="img" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-compass-discover-line"></text>
								</view>
							</view>
						</view>
					</view>
					<view class="list-column right">
						<view class="item" >
							<view class="thumbnail">
								<image class="img" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-coreos-fill"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="content">
			<view class="list">
				<view class="item" :class="[$themeClass('list-item-bg-color')]">
					<view class="left">
						<view class="icon-box">
							<text class="icon ri-file-list-2-line"></text>
						</view>
						<view class="title">我的订单</view>
					</view>
					<view class="right">
						<view class="arrow">
							<text class="icon ri-arrow-right-s-line"></text>
						</view>
					</view>
				</view>

				<view class="item" :class="[$themeClass('list-item-bg-color')]">
					<view class="left">
						<view class="icon-box">
							<text class="icon ri-wallet-3-line"></text>
						</view>
						<view class="title">我的钱包</view>
					</view>
					<view class="right">
						<view class="arrow">
							<text class="icon ri-arrow-right-s-line"></text>
						</view>
					</view>
				</view>

				<view class="item" :class="[$themeClass('list-item-bg-color')]">
					<view class="left">
						<view class="icon-box">
							<text class="icon ri-map-2-line"></text>
						</view>
						<view class="title">我的地址</view>
					</view>
					<view class="right">
						<view class="arrow">
							<text class="icon ri-arrow-right-s-line"></text>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				is_login:0,
				userInfo:{}
			}
		},
		mounted() {
			this.load()
			this.$emit('loaded', {
				name: 'my'
			})
		},
		methods: {
			getData(){
				let _this = this;
				const param = {};
				util.requestPost('Envlogin/getData',param,function(res) {
					console.log('个人信息',res);
					if(res.code == 1){
						_this.userInfo = res.data.list;
					}else{
						_this.$u.toast(res.msg, 2000);
					}
				}, (err) => {
					console.log(err);
				}, {isShowLoading: false});
			},
			load() {
				console.log('my on load')
				this.getData();
			},
			show() {
				console.log('my on show')
			},
		}
	}
</script>

<style lang="scss">
	.ex-mall-panel.list {
		.ex-mall-panel-content {
			.list-box {
				display: flex;
	
				.list-column {
					flex: 1;
	
					&.left {
						padding: 0 6px 0 28px;
	
						&>.item {
							&:nth-child(odd) {
								&>.thumbnail {
									&>.img {
										background-color: #0EAA90;
									}
								}
							}
	
							&:nth-child(even) {
								&>.thumbnail {
									&>.img {
										background-color: #F8E3DC;
									}
								}
							}
						}
					}
	
					&.right {
						padding: 0 28px 0 6px;
	
						&>.item {
							&:nth-child(odd) {
								&>.thumbnail {
									&>.img {
										background-color: #A8A8A9;
									}
								}
							}
	
							&:nth-child(even) {
								&>.thumbnail {
									&>.img {
										background-color: #7F8688;
									}
								}
							}
						}
					}
	
					&>.item {
						width: 100%;
						padding-bottom: 15px;
	
						&>.thumbnail {
							position: relative;
	
							&>.img {
								position: relative;
								z-index: 1;
								display: block;
								width: 100%;
								height: 25vw;
								border-radius: 12px;
							}
	
							&>.btn {
								position: absolute;
								top: 14px;
								right: 14px;
								z-index: 10;
								display: flex;
								justify-content: center;
								align-items: center;
								width: 28px;
								height: 28px;
								border-radius: 9px;
								background-color: #FFFFFF;
	
								&.favorite {
									&>.icon {
										font-size: 15px;
										color: #292929;
									}
								}
							}
						}
	
						&>.info {
							line-height: 1;
	
							&>.title {
								margin-top: 20px;
								line-height: 1.3;
								font-size: 15px;
								font-weight: 600;
							}
	
							&>.price {
								margin-top: 10px;
								font-size: 13px;
							}
						}
					}
				}
			}
		}
	}
	
	
	
	
	.page {
		&>.top {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 78px 0 42px 0;
			margin-top: -70px;
			border-radius: 0 0 2em 2em;

			&>.avatar {
				&>.img {
					width: 68px;
					height: 60px;
					border-radius: 9px;
					background-color: #E5AD8B;
				}
			}

			&>.name {
				margin-top: 24px;
				font-size: 17px;
				font-weight: 600;
			}

			&>.label {
				margin-top: 18px;
				font-size: 14px;
			}
		}

		&>.content {
			&>.list {
				padding: 0 28px;

				&>.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 84px;
					margin-top: 18px;
					padding: 0 24px;
					// background-color: #FFFFFF;
					border-radius: 12px;

					&>.left {
						display: flex;
						align-items: center;

						&>.icon-box {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 38px;
							height: 48px;
							border-radius: 12px;

							&>.icon {
								font-size: 18px;
								color: #FFFFFF;
							}
						}

						&>.title {
							margin-left: 18px;
							font-size: 14px;
							font-weight: 600;
							color: #292929;
						}
					}

					&:nth-child(3n-2) {
						&>.left {
							&>.icon-box {
								background-color: #FFC592;
							}
						}
					}

					&:nth-child(3n-1) {
						&>.left {
							&>.icon-box {
								background-color: #F76842;
							}
						}
					}

					&:nth-child(3n) {
						&>.left {
							&>.icon-box {
								background-color: #61DAD5;
							}
						}
					}

					&>.right {
						display: flex;
						align-items: center;

						&>.arrow {
							display: flex;
							align-items: center;

							&>.icon {
								font-size: 18px;
								font-weight: 600;
								color: #9093A2;
							}
						}
					}
				}
			}
		}
	}
</style>
